<script setup>
import headerMain from "@/components/header.vue";
import project from "@/model/project.vue";
import warning from "@/model/warning.vue";
import warningAnalyze from "@/model/warningAnalyze.vue";
import warningProcess from "@/model/warningProcess.vue";
import salary from "@/model/salary.vue";
import MapModel from "@/model/map.vue";
import autofit from "autofit.js";
autofit.init({
  dh: 1080,
  dw: 1100,
  el: "body",
  resize: true,
});
</script>

<template>
  <div class="main-panel">
    <headerMain />
    <div class="body-panel">
      <div class="row-panel">
        <div class="left-main-panel">
          <project />
        </div>
        <div class="middle-main-panel">
          <MapModel />
        </div>
        <div class="right-main-panel">
          <salary />
        </div>
      </div>
      <div class="row-panel">
        <div class="left-main-panel">
          <warning />
        </div>
        <div class="middle-main-panel">
          <warningAnalyze />
        </div>
        <div class="right-main-panel">
          <warningProcess />
        </div>
      </div>
    </div>
  </div>
</template>

<style>
* {
  margin: 0;
  padding: 0;
}
html,
body,
#app {
  height: 100%;
}
.main-panel {
  background: url("/src/assets/bg.png") no-repeat;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
}
.body-panel {
  width: 100%;
  padding:0 24px 30px;
  box-sizing: border-box;
}
.row-panel + .row-panel {
  margin-top: 24px;
}
.row-panel {
  display: flex;
}
.model-panel {
  box-shadow: inset 0px 1px 9px 0px #157bad;
  border: 1px solid #185e81;
  height: 100%;
  width: 100%;
}
.middle-main-panel {
  width: 68%;
  flex-shrink: 1;
  margin: 0 10px;
}
.left-main-panel,
.right-main-panel {
  width: 31.5%;
  flex-shrink: 1;
}
.line-flex-panel{
  display: flex;
}
</style>
